<!--
 * @description: 
 * @Date: 2023-05-15 15:34:07
 * @example: 
 * @params: 
-->

<template>
    <div class="container">
        <vue3dLoader
    filePath="/files/sd_sky_230315a.glb"
    :autoPlay="true"
    :cameraPosition="{ x: 0, y: 0, z: 600 }"
    :height="700"
    :backgroundColor="'#848484'"
    @process="onProcess"
  />
    </div>
    <div class="process">
      <el-progress :text-inside="true" :stroke-width="26" :percentage="process" v-if="process !== 100"/>
    </div>
</template>

<script setup lang="ts">
import { ref ,} from 'vue'
const currentModelIndex = ref();
const process = ref(0);
const rotation = ref();
const lights = ref();
rotation.value = {
  x: 0,
  y:0,
  z: 0
};
function onLoad() {
  rotate();
}
function rotate() {
  requestAnimationFrame(rotate);
  rotation.value.y -= 0.01;
}
function onProcess(event: any, index: number) {
  process.value = Math.floor((event.loaded / event.total) * 100);
  if (index != 0) {
    currentModelIndex.value = index;
   
  }else {
    
  }
}
lights.value = [
  {
    type: "AmbientLight",
    color: "#ffffff",
  },
  {
    type: "DirectionalLight",
    position: { x: 100, y: 10, z: 600 },
    color: "#ffffff",
    intensity: 10,
  },
  {
    type: "PointLight",
    color: "#ffffff",
    position: { x: 200, y: -200, z: 600 },
    intensity: 1,
  },
  {
    type: "HemisphereLight",
    skyColor: "#00FF00",
    groundColor: "#ffffff",
    position: { x: 500, y: -200, z: 600 },
  },
];
</script>

<style lang="less" scoped>
</style>